<template>
  <div class="user">
    <pageTable ref="pageTableRef" :pageName="pageName" @add-or-edit="showDialog" :header="headers">
      <template #level="row">
        <t-tag theme="primary" variant="light">{{
          levels.find((item) => item.value === row.level)!.label
        }}</t-tag>
      </template>
      <template #status="row">
        <t-switch
          size="large"
          :defaultValue="row.status"
          :disabled="row.id === 1"
          @change="updateStatus(row.id)"
        >
          <template #label="{ value }">
            <t-icon name="check" v-if="value" />
            <t-icon name="close" v-else />
          </template>
        </t-switch>
      </template>
      <template #role="row">
        <t-tag v-for="role in row.role" :key="role" theme="primary">
          {{ role }}
        </t-tag>
      </template>
    </pageTable>
    <pageDialog
      ref="pageDialogRef"
      :title="`${editId ? '编辑' : '新增'}${pageTitle}`"
      @confirm="confirm"
    >
      <t-form
        ref="formRef"
        labelAlign="top"
        resetType="initial"
        :data="editId ? editForm : addForm"
        :rules="editId ? editRules : addRules"
      >
        <t-form-item label="用户名" name="username">
          <t-input v-model="(editId ? editForm : addForm).username"></t-input>
        </t-form-item>
        <t-form-item label="昵称" name="nickname">
          <t-input v-model="(editId ? editForm : addForm).nickname"></t-input>
        </t-form-item>
        <t-form-item label="密码" name="password">
          <t-input v-model="(editId ? editForm : addForm).password"></t-input>
        </t-form-item>
        <t-form-item label="等级" name="level">
          <t-select v-model="(editId ? editForm : addForm).level">
            <t-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="部门" name="bid">
          <t-select v-model="(editId ? editForm : addForm).bid">
            <t-option
              v-for="item in commonStore.AllDept"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </t-option>
          </t-select>
        </t-form-item>
        <t-form-item label="备注" name="note">
          <t-input v-model="(editId ? editForm : addForm).note"></t-input>
        </t-form-item>
      </t-form>
    </pageDialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import pageTable from '@/components/page-table/page-table.vue'
import pageDialog from '@/components/page-dialog/page-dialog.vue'
import useDialog from '@/hooks/useDialog'
import useTable from '@/hooks/useTable'
import useSystemStore from '@/stores/main/system'
import { checkPassword } from './utils'
import useCommonStore from '@/stores/main/common'

const pageName = 'user'
const pageTitle = '用户'
const systemStore = useSystemStore()
const commonStore = useCommonStore()
commonStore.getAllDeptAction()

const headers = [
  { colKey: 'username', title: '用户名', align: 'center', ellipsis: true },
  { colKey: 'nickname', title: '昵称', align: 'center', ellipsis: true },
  { colKey: 'dept', title: '部门', align: 'center', ellipsis: true },
  { colKey: 'level', title: '等级', align: 'center', ellipsis: true },
  { colKey: 'status', title: '状态', align: 'center', ellipsis: true },
  { colKey: 'note', title: '备注', align: 'center', ellipsis: true },
  { colKey: 'ip', title: 'IP', align: 'center', ellipsis: true },
  { colKey: 'login_at', title: '登录时间', align: 'center', ellipsis: true },
  { colKey: 'created_at', title: '注册时间', align: 'center', ellipsis: true },
  { colKey: 'updated_at', title: '更新时间', align: 'center', ellipsis: true }
]
const levels = [
  { label: '超级', value: 5 },
  { label: '一级', value: 1 },
  { label: '二级', value: 2 }
]

const addForm = ref({
  username: '',
  nickname: '',
  password: '',
  level: '',
  bid: '',
  note: null
})
const editForm = ref({
  username: '',
  nickname: '',
  password: '',
  level: '',
  bid: '',
  note: null
})
const addRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  level: [{ required: true, message: '请选择等级', trigger: 'change' }],
  bid: [{ required: true, message: '请选择部门', trigger: 'change' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { validator: checkPassword, message: '字母、数字、部分特殊符号 6-20位', trigger: 'blur' }
  ]
}

const editRules = {
  ...addRules,
  password: [
    { validator: checkPassword, message: '字母、数字、部分特殊符号 6-20位', trigger: 'blur' }
  ]
}

const { editId, showDialog, formRef, pageDialogRef } = useDialog(editForm)
const { confirm, pageTableRef } = useTable({
  pageName,
  editId,
  editForm,
  addForm,
  formRef,
  pageDialogRef
})

const updateStatus = (id: number) => {
  const queryInfo = {
    page: pageTableRef.value!.pagination.current,
    size: pageTableRef.value!.pagination.pageSize
  }
  systemStore.editStatusAction(pageName, id, queryInfo)
}
</script>

<style>
.aa {
  border-radius: 50%;
}
</style>
